let that
//声明类
class Tabs {
  constructor(id) {
    //将this赋值给that（将实例化对象存起来）
    that = this
    //获取tab盒子（父级）
    this.main = document.querySelector(id)
    //获取添加按钮
    this.addBtn = this.main.querySelector('.firstNav .tabadd')
    //获取ul元素
    this.ul = this.main.querySelector('.firstNav ul')
    //获取section的父元素
    this.sectionsFather = this.main.querySelector('.tabscon')
    //调用初始化绑定事件
    this.init()
  }

  //初始化绑定事件
  init() {
    // 调用获取动态获取函数
    this.updata()
    // 绑定添加事件
    this.addBtn.addEventListener('click', this.addTabs)
    //绑定点击事件
    this.lis.forEach((item, index) => {
      //给每一个li添加index属性
      item.index = index
      item.addEventListener('click', this.toggleTabs)
    })
    //绑定删除事件
    this.delBtns.forEach(item => {
      item.addEventListener('click', this.delTabs)
    })

    //绑定双击编辑事件
    this.spans.forEach(item => {
      item.addEventListener('dblclick', this.editTabs)
    })

    //给section绑定双击编辑事件
    this.sections.forEach(item => {
      item.addEventListener('dblclick', this.editTabs)
    })
  }

  // 动态获取li和section
  updata() {
    //先获取li
    this.lis = this.main.querySelectorAll('.firstNav li')
    //获取选项卡
    this.sections = this.main.querySelectorAll('.tabscon section')
    //获取删除按钮
    this.delBtns = this.main.querySelectorAll('.firstNav li .iconfont')
    //获取span标签
    this.spans = this.main.querySelectorAll('.firstNav li span:first-child')
  }

  //清空类名
  clearClassName() {
    // console.log('我被调用了')
    this.lis.forEach(item => {
      item.className = ''
    })
    this.sections.forEach(item => {
      item.className = ''
    })
  }

  //切换事件
  toggleTabs() {
    // console.log(this.index)
    // console.log(this)
    //调用清空类名函数
    that.clearClassName()
    //留下我自己
    this.className = 'liactive'
    //切换section
    that.sections[this.index].className = 'conactive'
  }

  //添加事件
  addTabs() {
    // console.log('我是添加事件')
    //清空所有li和section的类名
    that.clearClassName()
    //创建需要添加的li
    const li = `<li class="liactive">
    <span>新增选项</span>
    <span class="iconfont icon-guanbi"></span>
    </li>`
    //创建section
    const section = `<section class="conactive">测试${Math.random()}</section>`
    //添加到父元素当中
    that.ul.insertAdjacentHTML('beforeend', li)
    that.sectionsFather.insertAdjacentHTML('beforeend', section)

    //调用初始化事件
    that.init()
  }

  //删除事件
  delTabs(e) {
    e.stopPropagation()
    // console.log(this)
    // console.log(this.parentNode.index)
    //封装index,this.parentNode.index是原来挂在li上的index属性
    let index = this.parentNode.index
    // 删除父节点（li）
    this.parentNode.remove()
    // 删除section，
    that.sections[index].remove()

    //调用初始化事件
    that.init()
    //判断删除的li是否为选中的
    if (that.main.querySelector('.liactive')) return
    // console.log(index)
    // index
    //   ? that.lis[index - 1]
    //     ? that.lis[index - 1].click()
    //     : ''
    //   : that.lis[index]
    //   ? that.lis[index].click()
    //   : ''
    // index ? that.lis[index - 1]?.click() : that.lis[index]?.click()
    // index
    //   ? that.lis[index - 1] && that.lis[index - 1].click()
    //   : that.lis[index] && that.lis[index].click()

    if (index === 0) {
      if (that.lis[index]) that.lis[index].click()
    } else {
      if (that.lis[index - 1]) that.lis[index - 1].click()
    }
  }

  //编辑事件
  editTabs() {
    //禁止文字选中
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
    //把内容存起来
    const str = this.innerHTML
    // console.log(str)
    //把span的内容改成input框
    this.innerHTML = `<input type="text">`
    // console.log(this.children[0])
    //获取input框
    const input = this.children[0]
    input.value = str
    // 选中input 的内容
    // input.focus()
    input.select()

    //给input绑定失焦事件
    input.onblur = function () {
      this.parentNode.innerHTML = this.value
    }

    //绑定回车键出发失焦事件
    input.onkeyup = function (e) {
      if (e.keyCode === 13) {
        this.blur()
      }
    }
  }
}

//实例化对象（绑定点击事件）
new Tabs('#tab')
